<template>
  <div class="search-bar">
    <van-search
      v-model="search"
      class="search-bar__content"
      placeholder="请输入搜索关键词"
      show-action
      shape="round"
      @search="onSearch"
    >
      <template v-slot:left-icon>
        <div class="search-bar__content__scan">
          <van-image src="https://fast-learn-oss.youbaobao.xyz/tb/scan.png" />
          <span />
        </div>
      </template>
      <template v-slot:right-icon>
        <div class="search-bar__content__camera">
          <van-image src="https://fast-learn-oss.youbaobao.xyz/tb/camera.png" />
        </div>
      </template>
      <template #action>
        <div class="search-bar__content__search">
          <div @click="onSearch">搜索</div>
        </div>
      </template>
    </van-search>
  </div>
</template>

<script>
export default {
  data() {
    return {
      search: ''
    }
  },
  methods: {
    onSearch() {
      console.log('search:' + this.search)
    }
  }
}
</script>

<style lang="less">
.search-bar {
  margin: 22px 24px 16px;
  &__content {
    height: 64px;
    border: 2px solid rgba(255, 255, 255, 0.02);
    border-radius: 32px;
    &__scan {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .van-image {
        width: 35px;
        height: 32px;
        margin-right: 9px;
      }
      span {
        height: 38px;
        border-left: 1px solid rgba(238, 238, 238, 1);
      }
    }

    &__camera {
      display: flex;
      justify-content: center;
      align-items: center;
      .van-image {
        width: 40px;
        height: 32px;
      }
    }

    &__search {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 2px 2px 2px 18px;
      padding: 10px 25px 13px 30px;
      background-image: linear-gradient(90deg, #fe8b0d 0%, #ff5201 100%);
      border-radius: 32px;
      div {
        // height: 37px;
        font-size: 26px;
        color: #ffffff;
      }
    }
  }
}

// 搜索框内容区域默认背景颜色
.van-search__content {
  background-color: #fff;
}
//搜索框内容区域文字起始位置
.van-field__body {
  margin-left: 12px;
}
// 搜索按钮padding
.van-search__action {
  padding: 0;
}
</style>
